<html>
	<head>
		<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			canvas {
				
			}
			.amap-markers {
				position: fixed;
				width: 100%;
				height: 9rem;
				box-shadow: 0px 9rem 5rem -5rem #9a9a9a inset;
			}
			#pickerBox {
				height: 50%;
				overflow: auto;
				position: relative;
				/* padding-top: 2rem; */
			}
			#pickerInput {
				width: 100%;
				position: fixed;
				top: 50%;
				z-index: 99999;
				height: 2rem;
				
			}
			.amap-ui-poi-picker-sugg-container {
				top: 2rem!important;
			}
			.ok {
				position: fixed;
				top: 2rem;
				right: 1rem;
			}
			.back {
				position: fixed;
				top: 1.5rem;
				left: 1rem;
				font-size: 2rem;
				text-shadow:#FFFFFF 1px 1px 1px;
			}
			.sugg-no-id {
				display: none;
			}
		</style>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript" >
			// 默认中心店坐标
			var center = null;
			var coordinate0 = getQueryVariable("coordinate0");
			var coordinate1 = getQueryVariable("coordinate1");
			if (coordinate0) {
				center = [coordinate0, coordinate1];
			}
			// 坐标
			var coordinate = [];
			// 中文地址
			var address = "";
			AMapLoader.load({
				"key": "711470f44f816b6ef27017215f5cb857",              // 申请好的Web端开发者Key，首次调用 load 时必填
				"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				"plugins": ['AMap.Scale','AMap.ToolBar'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				"AMapUI": {             // 是否加载 AMapUI，缺省不加载
					"version": '1.1',   // AMapUI 缺省 1.1
					"plugins":['misc/PositionPicker','misc/PoiPicker'],       // 需要加载的 AMapUI ui插件
				}
			}).then((AMap)=>{
				var map = new AMap.Map('container', {
					zoom: 13,
					center: center
				});
				window.map = map;
				var positionPicker = new AMapUI.PositionPicker({
					mode: 'dragMap',
					map: map
				});
				positionPicker.on('success', function(positionResult) {
					// 取最近的poi
					if (positionResult.regeocode.aois.length > 0) {
						document.getElementById("pickerInput").value = positionResult.regeocode.aois[0].name;
					} else {
						document.getElementById("pickerInput").value = positionResult.address;
					}
					poiPicker.suggest( document.getElementById("pickerInput").value);
					// 给位置信息赋值
					address = document.getElementById("pickerInput").value;
					coordinate[0] = positionResult.position.KL;
					coordinate[1] = positionResult.position.kT;
				});
				positionPicker.on('fail', function(positionResult) {
					// console.log(positionResult);
				});
				positionPicker.start();
				var poiPicker = new AMapUI.PoiPicker({
					input: 'pickerInput'
				});
				//初始化poiPicker
				poiPickerReady(poiPicker);
			}).catch((e)=>{
				console.error(e);  //加载错误提示
			});
		
			function poiPickerReady(poiPicker) {
				window.poiPicker = poiPicker;
				var marker = new AMap.Marker();
				var infoWindow = new AMap.InfoWindow({
					offset: new AMap.Pixel(0, -20)
				});
				//选取了某个POI
				poiPicker.on('poiPicked', function(poiResult) {
					var source = poiResult.source,
					poi = poiResult.item,
					info = {
						source: source,
						id: poi.id,
						name: poi.name,
						location: poi.location.toString(),
						address: poi.address
					};
					marker.setPosition(poi.location);
					map.setCenter(marker.getPosition());
				});
			}
		
			function ok() {
				// 向nvue传递数据
				uni.postMessage({
				    data: {  
				        position: {
							coordinate: coordinate,
							address: address
						}  
				    }  
				});  
			}
			function back() {
				uni.navigateBack();
			}
			/**
			 * 取url参数
			 * @param {Object} variable
			 */
			function getQueryVariable(variable)
			{
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			}
		</script>
		
	</head>
	<body>
		<div id="container" tabindex="0" style="height: 50%;">
			<div class="shadow"></div>
		</div>
		<div id="pickerBox">
			<input id="pickerInput" placeholder="输入关键字选取地点"/>
		</div>
		<a type="button" id="ok" class="ok" onclick="ok();">确定</a>
		<a type="button" id="back" class="back" onclick="back();"><</a>
	</body>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</html>